<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style >

     .root{
        margin: 0px;
        padding: 0px;
     	  width: 1519px;
   	    height: 1816px;
   	    
     }
     .m{
         padding-top:5px;
   	     padding-bottom:3px;
       }
     .q{
     	  margin-left:80px;
   	    display: inline-block;
        font-size: 1em;

       }
     .w{
        margin-left:-103px;
        display: inline-block;
        color: #d2d2d2;
        font-size: 15px;

       }
     .e{
        
        margin-left: 785px;
        display: inline-block;
        color:#d2d2d2;
        font-size: 13px;

       }
       .v{
        margin-left:-103px;
        display: inline-block;
        color:#d2d2d2;
        font-size: 13px;

       }
       .k{
         margin-left:10px;
        display: inline-block;
        color:#d2d2d2;
       }
       .l{
         margin-left:10px;
        display: inline-block;
        color:#d2d2d2;
       }
       
     .r{

   	    padding-top:8px;
   	    width: 1140px;
   	    height: 60px;
   	    background-color: #3d3d3d;
   	    margin:0 auto;
        border-radius: 10px;
       }
     .t{

    	padding-top:20px;
    	width: 1140px;
   	    height: 475px;
   	    background-image: url(02.jpg);
    	margin:0 auto;
    	border-radius: 5px;
    	margin-top:10px; 
       }
    
     .p{
    	
    	width: 200px;
   	    height: 10px;
   	    
    	border-radius: 5px;
    	margin-top:10px; 
       }
     
     .d{
    	width: 1140px;
   	    height: 250px;

      }
     .qwe{
        width: 300px;
        height: 420px;
        background-color:rgba(210,210,210,0.5);
        
        margin-left:820px; 
        border-radius: 3px;
       
        }
	  *{
          margin: 0;
          padding: 0;
	   	    font-size: 14px;
	   }

	 .ff input{
	   	  box-sizing: border-box;
	   	  color: #aaa;
	   	  
	   	  border: solid 1px;
	   	  width: 270px;
	   	  height: 55px;
          margin-left:15px;
	   	}
       
    .ww{
       	 margin-right: 20px;
       	 display: inline-block;
         margin:0 auto;


       }
     a:link{
       	text-decoration: none;
       }
     a{
        margin-top: 10px;
        display:inline-block;
       	 color:#3d3d3d;
         padding-left: 115px;

      }
    .qq{
       	margin-top: 15px;
       	margin-bottom:15px;
       	color:#3d3d3d;
       	font-size: 1.1rem;
        margin-left:100px;
      }
       
    .xx{
       	color: grey;
       	font-size: 12px;
       }
       
       .zz{
       	margin-top: 10px;
       	background-image:linear-gradient(#ec4c34,#d21920);
       	width: 270px;
       	height: 55px;
        margin-left:15px;
        border-radius:5px;
        border: 0px solid
       }
       .dd{
       	margin-top: 20px;
       	width: 200px;
       	height: 40px;

       }
       .hh{
       	margin-top: 20px;
       	display:inline-block;
       	margin-left:50px;
       }
      .cc{
      	margin-top: 20px;
       	display:inline-block;
       	margin-left:70px;
       }
      .rr a{
         margin-top:10px;
         color:#3d3d3d;
         padding-left: 115px;
         font-size:20px;
       }
      .rr a:hover{
          color: #d2d2d2;
      }
       .tt{

         color:#3d3d3d;
         
         font-size:18px;
         margin-left:48px;
         margin-top:-6px;
       }
       .pp{
          color:#3d3d3d;
          padding-left: 100px;
         margin-top:-7px;


       }
       .gg{
          color:white;
          font-size: 1.5rem;
          font-size: 1.5rem;
       }
    .eeq{
        width: 1140px;
        height: 68px;
        background-color: silver;
        display: flex;
        margin:0 auto;
        border-radius:10px;

    }
    .eeq ul {

        width: 1140px;
        height: 68px;
        background-color:#3d3d3d;
        display: flex;
         border-radius:8px;
        

    }
    .eeq ul li{

        display: flex;
    }
    .eep{
        width: 180px;
        height: 68px;
        background-color:#e91b25;
        border-top-left-radius:8px;
        border-bottom-left-radius:8px;
        


    }
    .eep img{
        margin-left: -120px;
        margin-top: 10px;
    }
    .eep a{
        margin-left: 18px;
        width: 60px;
        height: 68px;
        
        line-height: 68px;
        text-align: center;
         color: white;
        font-size: 1.35rem;
        margin:0 auto;
        border-radius:8px;
    }
    .aas{
          width: 80px;
          height: 50px;
          text-align: center;
          display: block;
    }
    .eew{
        width: 193px;
        height: 58px;
        background-color: blue;
        

    }
    .eew a{
        margin-left: 18px;
        width: 180px;
        height: 68px;
        background-color:#3d3d3d;
        line-height: 68px;
        text-align: center;
        color: white;
        font-size: 1.35rem;
        margin:0 auto;
        
    }
    .eew a img{
        width: 40px;
        height:40px;
    }
    .eee{
        width: 250px;
        height: 68px;
        background-color: black;

        
    }
    .eee a{
        margin-left: 18px;
        width: 160px;
        height: 68px;
        background-color:#3d3d3d;
        line-height: 68px;
        text-align: center;
         color: white;
        font-size: 1.35rem;
        margin:0 auto;
    }
    .eer{
        width: 212px;
        height: 68px;
        background-color: olivedrab;

    }
    .eer a{
        margin-left: 18px;
        width: 160px;
        height: 68px;
        background-color:#3d3d3d;
        line-height: 68px;
        text-align: center;
         color: white;
        font-size: 1.35rem;
        margin:0 auto;

    }
    .eet{

        width: 240px;
        height: 68px;
        background-color:pink;

    }
    .eet a{
        margin-left: 18px;
        width: 160px;
        height: 68px;
        background-color:#3d3d3d;
        line-height: 68px;
        text-align: center;
         color: white;
        font-size: 1.35rem;
        margin:0 auto;
    }
    .eeu{

        width: 212px;
        height: 68px;
        background-color:yellow;


    }
    .eeu a{
        margin-left: 18px;
        width: 160px;
        height: 68px;
        background-color:#3d3d3d;
        line-height: 68px;
        text-align: center;
         color: white;
        font-size: 1.35rem;
        margin:0 auto;
    }
     .eeq ul li a:hover{
      
      color: #d2d2d2;
    }
	    .mn{
	    	    width: 1140px;
            height: 250px;
            margin:0 auto;

    	      padding-top:10px;

            
	       }
	    .nb{
            width: 360px;
            height: 240px;
            float: left;

            border-radius: 5px;
	    }
	    .bv{
            width: 360px;
            height: 240px;
            float: left;
            margin-left: 31px;
            border-radius: 5px;
	    }
	    .vc{
            width: 360px;
            height: 240px;
            float: right;
            border-radius: 5px;
	    }
	    .cx{
	    	    width: 1140px;
            height: 26px;
            
            margin:0 auto;
            color: #3d3d3d;
            font-size: 1.5rem;
            padding-top:30px;
	    }
	    .xz{

    	    padding-top:15px;
    	    width: 1140px;

   	      height: 492px;

    	    margin:0 auto;
    	    border-radius: 5px;

        }
        .xz a{
            padding: 0px;
        }
        .footer-nav{
          background-color: #353535;
          padding-top: 40px;
          padding-bottom: 40px;
          background-size: 100%;
          height: 300px;
          width: 100%;
          margin-top: 22px;
        }
        .container{
          padding-left: 30px;
          padding-right: 30px;
          margin-left: auto;
          margin-right: auto;
        }
        .row{
          margin-right: -15px;
          margin-left: -15px;
        }
        .column{
          position: relative;
          float: left;
          width: 300px;
          height: 300px;
          padding-right: 5px;
          padding-left: 70px;
          margin-right: -100px;
        }
        .title-1{
          display: block;
          line-height: 22px;
          font-size: 19px;
          margin: 0 0 20px;
          color: #fff;
          padding-left: 115px;
        }
        .list-unstyled{
          padding-left: 0;
          list-style: none;
          margin: 0 20px 20px 0;
          line-height: 1;
          color: #3d3d3d;
        }
        .menu-item-target{
          display: block;
          margin-bottom: 20px;
          font-size: 15px;
          color: #727272;
        }
        .menu-item-target img{
 
          height: 30px;
          width: 30px;
        }
         .column ul li a:hover{
      
      color: #d2d2d2;
    }
    .menu-item-target img{

    }
    .ljq{
        display: flex;
    }
    .ljq a img{
        box-shadow: 0 0 2px  #555;
    }
    .ljq a{
        padding: 0px;
    }
    .ljw{
        display: flex;
    }
    .ljw a{
        padding: 0px;
    }
    .ljw a img{
        box-shadow: 0 0 2px  #555;
    }
   .lje{
       display: flex;
   }
    .lje a{
        padding-left: 29px;
    }
    .lje a img{
        box-shadow: 0 0 2px  #555;
    }
    .qqi{
        padding-top: 20px;
    }
    .e a{
        color: #d2d2d2;
        font-size: 12.5px;
    }
    .e a:hover{
        color: #333333;
    }
    .w a{
        color: #d2d2d2;
        font-size: 12.5px;
    }
     .w a:hover{
         color: #333333;
     }
     .v a{
         color: #d2d2d2;
         font-size: 12.5px;
     }
     .v a:hover{
         color: #333333;
     }
      hr{ 
      margin-top: 40px;
        width: 1140px;
        margin-left: 190px;
        color: #d2d2d2;
    }
    
    

</style>
<body>
<div class="root">
        <div class="m"></div>
	    <div class="qqq">
		    <div class="q"><a href="">中文<img src="400.png"></a></div>
        <div class="k">|</div>
            <div class="w"><a href="">English</a></div>

            <div class="e"> <a href="">登录</a></div>
        <div class="l">|</div>
            <div class="v"><a href="">追踪订单</a></div>

	    </div>
	    <div class="m"></div>
	    <div class="eeq">
           <ul> 
                <li class="eep"><a href=""><img src="20.jpg"></a></li>
                <li class="eew"><a href=""><img src="100.png">菜单</a></li>
                <li class="eee"><a href=""><img src="100.png">优惠券</a></li>
                <li class="eer"><a href=""><img src="11.png">账户</a></li>
                <li class="eet"><a href=""><img src="12.png">帮助<img src="13.png"></a></li>
               

           </ul>
      </div>
	    <div class="t">
        

        
             <div class="qwe">
                 <div class="ww">
                  
                     <div class="qq"><img src="09.png">&nbsp开始订餐</div>
                 </div>
                <form action="">
                    <div class="ff"><input type="text" id="username" name="username" placeholder="&nbsp&nbsp邮箱/手机号"></div>
                    <div class="ff"><input type="password" id="password" name="password"placeholder="&nbsp&nbsp密码"></div>
                    <div>&nbsp</div>
                    <label>&nbsp&nbsp&nbsp&nbsp&nbsp<input type="checkbox"aria-label=""style="height: 38px;width: 38px;vertical-align: middle;border: 1px solid red;">&nbsp&nbsp&nbsp下次自动登录</label>

                    <div><button class="zz"><div class="gg">登录</div></button></div>
                    <a href="">忘记密码？</a>
                    <div class="pp">第三方登录:&nbsp&nbsp&nbsp<img src="06.png"></div>
                    
                    <div> 
                    
                         <div class="rr"><a href="">新用户</a></div>
                         <div class="tt"><img src="22.png">请输入您的送餐地址</div>
                    </div> 
                 </form>
            </div>

        </div>
        <div class="mn">
        	<div class="ljq">
                <a href=""><img  class="nb" src="03.jpg"></a>
        	<div class="ljw" >
                <a href=""><img  class="bv" src="04.jpg"></a>
        	</div>
        	<div class="lje">
                <a href=""><img  class="vc" src="05.jpg"></a>
        	</div>
         </div>
        </div>
        
        <hr>
        <div class="cx">
        	如何订餐？
        </div>
        <div class="xz">
            <a href=""><img src="01.jpg" alt=""></a>
        </div>
		  <footer class="qqi">
  <div class="footer-nav">
    <div class="container">
      <div class="row">
        <div class="column">
          <h3 class="title-1">浏览菜单</h3>
          <ul class="list-unstyled">
            <li class="menu-item">
              <a class="menu-item-target" href="">促销产品和热卖产品</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">主食和超值套餐</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">小食</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">甜品</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">开心乐园餐</a>
            </li>
          </ul>
        </div>
        <div class="column">
          <h3 class="title-1">帮助</h3>
          <ul class="list-unstyled">
            <li class="menu-item">
              <a class="menu-item-target" href="">网站条款</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">隐私政策</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">订餐须知</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">常见问题</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">关于30分必达</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">经营公示</a>
            </li>
            <li class="menu-item">
              <a class="menu-item-target" href="">网络餐饮公示</a>
            </li>
          </ul>
        </div>
        <div class="column">
          <h3 class="title-1">关注我们</h3>
          <ul class="list-unstyled">
            <li class="menu-item">
              <a class="menu-item-target" href=""><img src="wb.png">&nbsp &nbsp新浪微博</a>
            </li>
            <li>
              <a class="menu-item-target" href=""><img src="wx.png"> &nbsp 微信  </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer> 
</div>


</body>

</html>